<template>
  <div class="page-button-container" v-if="totalBut > 1" >
    <button :disabled="current ==1" :class="{'not-all':current == 1}" @click="changepage(1)" >
      |&lt;&lt;
    </button>
    <button :disabled="current == 1" :class="{'not-all':current == 1}"  @click="changepage(current-1)" >
      &lt;&lt;
    </button>
    <button v-for="(i,index) in buttons" :key="i+'_'+index" :class="{active :current == i  }"  @click="changepage(i)" >
        {{i}}
    </button>
    <button :disabled="current >= maxBut" :class="{'not-all':current >= maxBut}"  @click="changepage((+current)+1)" >
      &gt;&gt;
    </button>
    <button :disabled="current >= maxBut" :class="{'not-all':current >= maxBut}"  @click="changepage(maxBut)" >
      &gt;&gt;|
    </button>
  </div>

</template>

<script>
import {ref,computed} from "vue"
export default {
props:{
    count:{
        type:Number,
        default:1
    },
    current:{
      type:Number,
      default:1
    },
    buttonNum:{
      type:Number,
      default:10
    }
},
setup(props,cxt){
  const bus = Math.ceil(props.buttonNum/2)
  const totalBut = computed(()=>{
    return Math.ceil(props.count / props.buttonNum);
  });

  const minBut = computed(()=>{
    let min = props.current - bus;
    return min < 1 ? 1 : min
  });

  const maxBut = computed(()=>{
    let max = props.current + bus;

    return max > totalBut.value ? totalBut.value : max;
  })
  const buttons = computed(()=>{
    const num =[];
    for(let i = minBut.value; i<= maxBut.value;i++){
      num.push(i);
    }
    return num;
  })

  const changepage = (page)=>{
    if(page < 1 || page > maxBut.value) return;
   
    cxt.emit("change",page);
  }


  return{
    totalBut,
    buttons,
    minBut,
    maxBut,
    changepage
  }

}


}
</script>

<style lang="less" scoped>
.page-button-container{
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  button{
    text-align:center;
    background: none;
    cursor: pointer;
    border: none;
    height: 40px ;
    font-size: 20px;
    margin: 0 5px;
    &:hover{
      color: #f40;
    }
  }
  .not-all{
    cursor: not-allowed;

    &:hover{
      color:#b7b7b7;
    }

    }
}

  .active{
    color: blue;
  }
  .bot-line{
    width: 100%;
    text-align: center;
  }
</style>